<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/common/tags.jsp"%>

<aos:html title="前端管理" base="http" lib="ext">
	<aos:body>
	</aos:body>
</aos:html>


<aos:onready>
	<aos:viewport layout="border">
		<aos:gridpanel id="_g_info" url="frontService.listImgInfo" onrender="_g_info_query" region="center">
			<aos:docked forceBoder="1 0 1 0">
				<aos:dockeditem xtype="tbtext" text="首页图片" />
			</aos:docked>
			<aos:column type="rowno" />
				<aos:column header="用户编号" dataIndex="id" hidden="true"/>
				<aos:column header="首页轮播图1" dataIndex="banner1" width="60" />
				<aos:column header="首页轮播图2" dataIndex="banner2"  width="60" />
				<aos:column header="首页轮播图3" dataIndex="banner3" width="60" />
		        <aos:column header="副轮播图1" dataIndex="sub_banner1" width="60" />
				<aos:column header="副轮播图2" dataIndex="sub_banner2"  width="60" />
				<aos:column header="副轮播图3" dataIndex="sub_banner3" width="60" />
				<aos:column header="编辑" rendererFn="fn_button_render" align="center" fixedWidth="60" />
		</aos:gridpanel>

        <%-- 通过这个弹窗表单演示再查询一次DB加载数据的方法 --%>
		<aos:window id="_w_info" title="首页图片预览" onshow="_w_info_onshow">
			<aos:formpanel id="_f_info" width="400" layout="anchor" labelWidth="70" >
				<aos:textfield name="id" fieldLabel="用户编号" readOnly="true" />
				<aos:textfield name="banner1" fieldLabel="首页轮播图1"  />
				<aos:textfield name="banner2" fieldLabel="首页轮播图2" />
				<aos:textfield name="banner3" fieldLabel="首页轮播图3"  />
				<aos:textfield name="sub_banner1" fieldLabel="副轮播图1"  />
				<aos:textfield name="sub_banner2" fieldLabel="副轮播图2"  />
				<aos:textfield name="sub_banner3" fieldLabel="副轮播图3"  />
			</aos:formpanel>
			<aos:docked dock="bottom" ui="footer">
				<aos:dockeditem xtype="tbfill" />
				<aos:dockeditem onclick="updateImg" text="提交" icon="ok.png" />
				<aos:dockeditem onclick="#_w_info.hide();" text="关闭" icon="close.png" />
			</aos:docked>
		</aos:window>
		
		
		
	</aos:viewport>
	
	<script type="text/javascript">
		//加载表格数据
		function _g_info_query() {
			_g_info_store.loadPage(1);
		}
		
		//窗口弹出事件监听
		function _w_info_onshow() {
			var record = AOS.selectone(_g_info);
            AOS.ajax({
            	params : {
            		id: record.data.id
            	},
                url: 'frontService.getImgInfo',
                ok: function (data) {
                	_f_info.form.setValues(data);
                }
            });
		}
		
		
		//更新照片链接
		function updateImg() {
			AOS.ajax({
				forms : _f_info,
                url: 'frontService.updateImgInfo',
                ok: function (data) {
                	AOS.tip(data.appmsg);
					_g_info_store.reload();
					_w_info.hide();
                }
            });
		}
		
		
		
		//按钮列转换
		function fn_button_render(value, metaData, record, rowIndex, colIndex,
				store) {
			return '<input type="button" value="编辑" class="cbtn" onclick="_w_info_show();" />';
		}
		
		
		
	</script>
</aos:onready>

<script type="text/javascript">

	//显示编辑窗口
	function _w_info_show(){
		Ext.getCmp('_w_info').show();
	}
	
	
</script>